fix: improve badge text measurement accuracy#1486
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
There was a problem hiding this comment.
Pull request overview
This PR improves the accuracy of SVG badge sizing by measuring text width using a Canvas 2D context (instead of a fixed per-character heuristic), which should improve alignment/spacing for variable-width text.
Changes:
- Add Canvas-based text measurement with caching + heuristic fallback for badge width calculations.
- Simplify badge width calculation by removing the per-strategy character-width override.
- Add
@napi-rs/canvasdependency (and lockfile updates) to support server-side Canvas measurement.
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
server/api/registry/badge/[type]/[...pkg].get.ts |
Switch badge text width calculation to Canvas measureText, add cached context + fallback. |
package.json |
Add @napi-rs/canvas dependency. |
pnpm-lock.yaml |
Lockfile updates for @napi-rs/canvas and its optional platform packages. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📝 WalkthroughWalkthroughAdds dependency Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 1 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches🧪 Generate unit tests (beta)
Comment |
wojtekmaj
force-pushed
the
text-measurement
branch
from
7f53a18 to
b7809e3
Compare
wojtekmaj
force-pushed
the
text-measurement
branch
from
b7809e3 to
6dbcf06
Compare
This PR improves badge appearance by using a more accurate method to measure text width. Instead of relying on a predefined character width, it utilizes the Canvas API to measure the actual width of the text, resulting in better alignment and spacing for badges with varying character widths.
Speaking in code, this is how the old and new methods compare:
{ label: 'iiiiiiiiii', leftWidthOld: 86, leftWidth: 41 }
{ label: 'wwwwwwwwww', leftWidthOld: 86, leftWidth: 97 }
wojtekmaj
force-pushed
the
text-measurement
branch
from
6dbcf06 to
a52779d
Compare
|
actually will wait for current renovate PRs to go in, then merge |
2 participants
This PR improves badge appearance by using a more accurate method to measure text width. Instead of relying on a predefined character width, it utilizes the Canvas API to measure the actual width of the text, resulting in better alignment and spacing for badges with varying character widths.
Speaking in code, this is how the old and new methods compare:
Actual images before:
After:
